<template>
	<view class="section-component">
		<view class="section-title">{{ title }}</view>
		<view class="section-content">
			<scroll-view scroll-x class="scroll-banner">
				<view class="banner-item" v-for="(item, index) in list" :key="index">
					<image :src="item.image" mode="aspectFill" class="section-banner" />
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"section",
		data() {
			return {
				
			};
		},
		props: {
			title: {
				type: String,
				default: '暂无标题'
			},
			list: {
				type: Array,
				default: () => []
			}
		},
		created() {
			console.log('Section component created:', {
				title: this.title,
				list: this.list
			});
		}
	}
</script>

<style scoped>
	/* 板块样式 */
	.section-component {
		background-color: #fff;
		margin: 20rpx;
		padding: 20rpx;
		border-radius: 16rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.scroll-banner {
		white-space: nowrap;
	}

	.banner-item {
		display: inline-block;
		margin-right: 20rpx;
	}

	.section-banner {
		width: 300rpx;
		height: 200rpx;
		border-radius: 10rpx;
		border: 0.5px solid #c9c9c9;
	}
</style>